<template>
  <a-spin :spinning="loading">
    <a-card style="margin-top: 24px" :bordered="false" title="糖尿病风险评估">
      <a-button slot="extra" type="danger" @click="exit"> 返回首页 </a-button>
      <div class="table-operator" style="border-top: 5px">
        <a-button type="danger" @click="add" :disabled="buttonStatus"> 填写量表 </a-button>
      </div>

      <a-tabs v-model="activeKey" hide-add @click="changeDiabetes()" @edit="onEdit">
        <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
          {{ pane.content }}
        </a-tab-pane>
      </a-tabs>
      <div class="container">
        <div class="width90">
          <a-form-model-item layout="inline" label="评估结果" v-if="evalution1.output">
            <span class="ant-form-text" v-html="evalution1.output"> </span>
          </a-form-model-item>
          <a-form-model-item label="1.您的性别">
            <a-radio-group v-model="gender" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="2.您的年龄">
            <a-date-picker
              style="width: 30%"
              placeholder="请选择出生日期"
              v-model="birth"
              :format="dateFormat"
              @change="onDateChange"
              :getCalendarContainer="node => node.parentNode"
            />
          </a-form-model-item>
          <a-form-model-item label="3.你的身高（cm）">
            <a-input-number style="width: 30%" :min="0" :max="999" v-model="height" placeholder="请输入你的身高" />
          </a-form-model-item>
          <a-form-model-item label="4.你的体重（kg）">
            <a-input-number style="width: 30%" :min="0" :max="999" v-model="weight" placeholder="请输入你的体重" />
          </a-form-model-item>
          <a-form-model-item label="5.你的腰围（cm）">
            <a-input-number style="width: 30%" :min="0" :max="999" v-model="waistline" placeholder="请输入你的腰围" />
          </a-form-model-item>
          <a-form-model-item label="6.你的收缩压（mmHg）">
            <a-input-number
              style="width: 30%"
              :min="0"
              :max="999"
              v-model="pressureSystolic"
              placeholder="请输入你的收缩压"
            />
          </a-form-model-item>
          <a-form-model-item label="7.是否有糖尿病家族史（父母，兄弟姐妹，子女）">
            <a-radio-group v-model="diabetesFamily" :options="options1" />
          </a-form-model-item>

          <div class="footer" v-if="!evalution1.output">
            <a-button
              :loading="saveLoading"
              style="margin-left: 500px; margin-top: 15px; margin-bottom: 1px"
              type="danger"
              @click="postDiabetes()"
            >
              评估
            </a-button>
          </div>
        </div>
      </div>
    </a-card>
  </a-spin>
</template>

<script>
import { EvalutionMixin } from '@/mixins/EvalutionMixin'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'

const options = [
  {
    value: 1,
    label: '男'
  },
  {
    value: 2,
    label: '女'
  }
]
const options1 = [
  {
    value: 1,
    label: '有'
  },
  {
    value: 2,
    label: '无'
  }
]

export default {
  name: 'Burnout',
  mixins: [EvalutionMixin],
  data() {
    var panes = []

    return {
      sas: {},
      evalution1: {
        output: ''
      },
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId] },
      buttonStatus: false,
      savaRes: [],
      input: [],
      options1,
      options,
      dateFormat: 'YYYY-MM-DD',
      birth: '',
      gender: '',
      diabetesFamily: '',
      height: '',
      pressureSystolic: '',
      waistline: '',
      weight: '',
      activeKey: panes.content,
      panes,
      newTabIndex: 0,
      url: {
        postDiabetes: '105/26/1052601',
        getDiabetes: '105/26/1052603'
      }
    }
  },
  created() {
    this.getDiabetes()
  },
  methods: {
    callback(key) {
      console.log(key)
    },
    onDateChange(date, dateString) {
      this.birth = dateString
    },
    onEdit(targetKey, action) {
      this[action](targetKey)
    },
    exit() {
      const patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let query = {}
      query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      query[PAGE_MENU_TYPE.PatientId] = patientId
      this.$router.push({
        path: '../index',
        query
      })
    },

    add() {
      this.buttonStatus = true
      this.evalution1.output = ''
      this.gender = ''
      this.diabetesFamily = ''
      this.height = ''
      this.birth = ''
      this.pressureSystolic = ''
      this.waistline = ''
      this.weight = ''
      this.evalution1.output = ''
      const panes = this.panes
      const activeKey = `newTab${this.newTabIndex++}`
      panes.unshift({
        title: '请开始填写',
        key: activeKey,
        closable: false
      })
      this.panes = panes
      this.activeKey = activeKey
    },
    remove(targetKey) {
      let activeKey = this.activeKey
      let lastIndex
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.panes.filter(pane => pane.key !== targetKey)
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key
        } else {
          activeKey = panes[0].key
        }
      }
      this.panes = panes
      this.activeKey = activeKey
    }
  }
}
</script>
<style scoped>
.container {
  background-color: #fff;
  margin: 0 auto;
}
.title {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #333333;
  margin: 15px 0;
}
/* .footer {
  text-align: center;
} */
.tall-text {
  font-size: 12px;
  margin: 20px auto;
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 5px;
}
p {
  margin: 5px;
}
.eval_p {
  margin: 15px 10px;
}
.eval_diet {
  margin-top: 15px;
  font-size: 16px;
}
.width90 {
  width: 90%;
  margin: 0 auto;
}
</style>

